<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            width: 180px;
        }

        #tableHead {
            display: flex;
            background-color: #00ccff;
        }

        .list {
            display: flex;
            background-color: #99ff99;
        }
    </style>
    <script>
        var rowObj;
        window.onload = function () {
            var listArr = document.getElementsByClassName("list");
            for (var i = 0; i < listArr.length; i++) {
                //给选中的那一个list赋值一个id
                listArr[i].id = i + 1;
                listArr[i].onclick = function () {
                    changeColor(this.id);
                }
            }
            rowObj = document.getElementById("1");
        }

        function changeColor(rowId) {
            //正在显示的div变回蓝色
            rowObj.style.backgroundColor = "#99ff99";
            //得到要变色div对象
            var divObj = document.getElementById(rowId);
            //让选中的div变成白色
            divObj.style.backgroundColor = "white";
            rowObj = divObj;
        }

    </script>
</head>
<body>
<div id="tableHead">
    <div>id</div>
    <div>姓名</div>
    <div>性别</div>
    <div>年龄</div>
    <div>职位</div>
    <div>学历</div>
</div>

<div id="tableBody">
    <div class="list">
        <section></section>
        <div>1</div>
        <div>赵云</div>
        <div>男</div>
        <div>21</div>
        <div>部门经理</div>
        <div>本科</div>
    </div>

    <div class="list">
        <div>2</div>
        <div>吕布</div>
        <div>男</div>
        <div>21</div>
        <div>普通员工</div>
        <div>高中</div>
    </div>

    <div class="list">
        <div>3</div>
        <div>郭嘉</div>
        <div>男</div>
        <div>18</div>
        <div>部门经理</div>
        <div>硕士</div>
    </div>
</div>
</body>
</html>